<template>
    <div class="icon">
        <item title="基础图标">
            <cell>
                <f-icon name="home_light"></f-icon>
            </cell>

            <cell>
                <f-icon name="share_light"></f-icon>
            </cell>

            <cell>
                <f-icon name="search_light"></f-icon>
            </cell>

            <cell>
                <f-icon name="cart_light"></f-icon>
            </cell>

            <cell>
                <f-icon name="favor_light"></f-icon>
            </cell>
        </item>

        <item title="图标颜色">
            <cell>
                <f-icon name="like" size="36px" color="#FE5F55"></f-icon>
            </cell>

            <cell>
                <f-icon name="scan" size="36px" color="#FFD166"></f-icon>
            </cell>

            <cell>
                <f-icon name="friend" size="36px" color="#88D498"></f-icon>
            </cell>

            <cell>
                <f-icon name="mail" size="36px" color="#9A8C98"></f-icon>
            </cell>

            <cell>
                <f-icon name="ticket" size="36px" color="#E07A5F"></f-icon>
            </cell>
        </item>

        <item title="徽标提示">
            <cell>
                <f-icon name="message_light" size="36px" badge="0"></f-icon>
            </cell>

            <cell>
                <f-icon name="message_light" size="36px" badge="9"></f-icon>
            </cell>

            <cell>
                <f-icon name="message_light" size="36px" badge="100"></f-icon>
            </cell>
        </item>

        <item title="图标大小">
            <cell>
                <f-icon name="favor_fill_light" size="26px" color="#FFCC33"></f-icon>
            </cell>

            <cell>
                <f-icon name="favor_fill_light" size="36px" color="#FFCC33"></f-icon>
            </cell>

            <cell>
                <f-icon name="favor_fill_light" size="46px" color="#FFCC33"></f-icon>
            </cell>
        </item>
    </div>
</template>

<script>
import Item from '../components/Item';
import Cell from '../components/Cell.vue';
export default {
    name:"Icon",
    data(){
        return {
        }
    },
    components:{
        Item,
        Cell
    }
}
</script>

<style lang="scss" scoped>
</style>